		/*
		 * 
		 * auto:beside有
		 * 2020年3月4日15:42:07
	 用法  
	 <div class="select-wrap">
			<select name="" class="select-item">
				<option value="1">菜单1</option>
				<option value="2">菜单2</option>
				<option value="3">菜单3</option>
				<option value="4">菜单4</option>
				<option value="5">菜单5</option>
				<option value="6">菜单6</option>
				<option value="7">菜单7</option>
				<option value="8">菜单8</option>
				<option value="9">菜单9</option>
				<option value="10">菜单10</option>
				<option value="11">菜单10</option>
				<option value="12">菜单12</option>
			</select>
		</div>
	 * 
	 * */
!(function(win,doc){
	function HzSelect(selectWrap){
		
		this.wrapEl = selectWrap;
		this.newSelect = doc.createElement('div');
		this.newSelect.setAttribute('class','hz-select');
		this.optionEl = selectWrap.getElementsByClassName('select-item')[0];
		this.optionItem = selectWrap.getElementsByClassName('select-item')[0].getElementsByTagName('option');
		
		this.checkedItem = doc.createElement('span');
		this.ul = doc.createElement('ul');
		if(this.optionItem.length === 0){
			var li = doc.createElement('li');
				li.innerText = '暂无数据';
				li.setAttribute('data-value',null);
				
				this.ul.appendChild(li);
				this.checkedItem.innerText = '暂无数据';
				
				this.checkedItem.setAttribute('data-value',null);
		}else{
			for(let i = 0, len = this.optionItem.length; i < len; i++){
				var li = doc.createElement('li');
				li.innerText = this.optionItem[i].innerText;
				li.setAttribute('data-value',this.optionItem[i].value);
				
				this.ul.appendChild(li)
			}
			this.checkedItem.innerText = this.optionItem[0].innerText;
			
			this.checkedItem.setAttribute('data-value',this.optionItem[0].value);
		}
		
		this.checkedItem.className = 'checkItem'
		this.newSelect.appendChild(this.checkedItem);
		this.newSelect.appendChild(this.ul);
		this.wrapEl.appendChild(this.newSelect);
	
		this.ul.addEventListener('click',this.checkedOption.bind(this),false)
		this.checkedItem.addEventListener('click',this.showSelect.bind(this),false)
		//console.log(this.optionItem)
		
	}
	HzSelect.prototype = {
		checkedOption:function(e){
			var ele = e.target,
				liList = this.ul.getElementsByTagName('li');
			if(ele.tagName.toLowerCase() === 'li'){
					var idx = Array.prototype.indexOf.call(liList,ele)
					var tar = liList[idx],
						checkedValue = tar.getAttribute("data-value"),
						checkedText = tar.innerText;
					if(this.checkedItem.getAttribute('data-value') === checkedValue){
						//console.log('未变更');
						this.hideSelect();
					}else{
						this.checkedItem.innerText = checkedText;
						this.checkedItem.setAttribute('data-value',checkedValue);
						this.wrapEl.getElementsByClassName('select-item')[0].value = checkedValue;
						this.hideSelect();
						//手动触发html select onchange事件
						var onchangeObj = null;
						if(doc.createEvent){
							onchangeObj = doc.createEvent('HTMLEvents');
							onchangeObj.initEvent('change',true,false)
						}else{
							onchangeObj = new Event('change',{'bubbles':true});
						}
						this.optionEl.dispatchEvent(onchangeObj);
					}
					
					
			}
		
		},
		hideSelect: function(){
			this.ul.className = '';
			this.ul.parentNode.style.zIndex = '999';
			this.checkedItem.className = 'checkItem'
		},
		showSelect: function(){
			var className = this.ul.className;
			this.ul.parentNode.style.zIndex = '2001';
			if(className.indexOf('open') > -1){
				this.ul.className = '';
				this.checkedItem.className = 'checkItem'
			}else{
				this.ul.className += ' open'
				this.checkedItem.className += ' active'
			}
		}
	}
	
	win.addEventListener('DOMContentLoaded',function(){
		var selectWrap = doc.getElementsByClassName('select-wrap');
		if(selectWrap.length > 0){
			for(let i = 0, len = selectWrap.length; i < len; i++){
		    	new HzSelect(selectWrap[i]);	    	
		    }
		}
	    
	},false)
	
})(window,document);
